import React, { FC, useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import Header from '@/components/home/header'
import Loading from '@/components/home/loading/saleLoading'
import CoursePlan from '@/components/changeCourse/coursePlan'
import EmptyChange from '@/components/changeCourse/empty'
import { getQueryVariable } from '@/utils/http'
import { getStuPlanList, isChangeStuPlan } from '@/api/changeCourse'
import { StuPlanListData, planItem } from '@/types/changeCourse'

const interchangeablePlan: FC<{}> = () => {
  const navigate = useNavigate()
  const stuCouId = getQueryVariable('stuCouId')
  const [loading, setLoading] = useState(false)
  const [planListData, setPlanListData] = useState<StuPlanListData>()
  useEffect(() => {
    setLoading(true)
    getStuPlanList({ stuCouId: stuCouId }).then((res) => {
      setLoading(false)
      if (res.result.status == 1) {
        setPlanListData(res.result.data)
      }
    })
  }, [])
  const pathTo = (val: planItem) => {
    setLoading(true)
    isChangeStuPlan({ stuCouId: val.stuCouId, planId: val.planId }).then((res) => {
      setLoading(false)
      if (res.result.status == 1 && res.result.data.status == 1) {
        navigate('/changeTalk?stuCouId=' + val.stuCouId + '&planId=' + val.planId)
      }
    })
  }
  return (
    <div className="w-full h-full min-h-screen bg-gray-F7F7F8 font-normal font-regular">
      <Header
        cb={() => {
          navigate(-1)
        }}
        headerText={'选择调换讲次'}
        headerColor="bg-white"
        notHeaderColor={false}
      ></Header>
      {loading ? <Loading noBorder={true} modal={true}></Loading> : null}
      {planListData && planListData.list && planListData.list.length > 0 ? (
        <div className="p-r1.2">
          {planListData.list.map((val: planItem, key: number) => (
            <div key={key} className="mb-r1.0 pb-r0.6 bg-white rounded-r0.8 relative">
              <CoursePlan item={val} left={true}></CoursePlan>
              <div
                className="w-r6.3 h-r2.4 absolute right-r1.2 bottom-r1.6 leading-r2.4 text-r1.3 text-center bg-red-FF3627 rounded-r1.3 text-white font-medium font-medium-family"
                onClick={() => pathTo(val)}
              >
                去调换
              </div>
            </div>
          ))}
          {/* <div className="text-gray-999999 text-r1.2 text-center mt-r2.4">
            -&nbsp;&nbsp;没有更多了&nbsp;&nbsp;-
          </div> */}
        </div>
      ) : (
        <EmptyChange content={['暂无可调换的讲次']} />
      )}
    </div>
  )
}

export default interchangeablePlan
